<template>
  <div class="searchtop">
    <div class="top">
      <!-- 面包屑导航 -->
      <span>全部结果:</span>
      <div class="result">
        <el-breadcrumb separator-class="el-icon-close" >
          <el-breadcrumb-item v-if="searchlist.keyword" @click.native="romoveKeyword">{{searchlist.keyword}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="searchlist.trademark"  @click.native="romoveTrademark">{{searchlist.trademark}}</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in navList" :key="index" @click.native="romoveNavList" >{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="middle">
      <div>
        <div class="left">品牌</div>
        <div class="right" @click="gosearch">
          <a
            href="javascript:;"
            v-for="r in searchList.trademarkList"
            :key="r.tmId"
            :data-index="`${r.tmId}:${r.tmName}`"
            >{{ r.tmName }}</a
          >
        </div>
      </div>
      <div v-for="a in searchList.attrsList" :key="a.attrId">
        <div class="left">{{ a.attrName }}：</div>
        <div class="right" @click="getjiansuoKey">
          <a
            href="javascript:;"
            v-for="(aa, index) in a.attrValueList"
            :key="index"
            :data-val="`${a.attrId}:${aa}:${a.attrName}`"
            @click="addNav(aa)"
            >{{ aa }}</a
          >
        </div>
      </div>
    </div>
    <div class="bottom">
      <a
        href="javascript:;"
        :class="{ current: current === 1 }"
        @click="changeCurrent1"
      >
        <span>综合<i :class="arrow" v-show="current === 1"></i></span>
      </a>
      <a
        href="javascript:;"
        :class="{ current: current === 2 }"
        @click="changeCurrent2"
      >
        <span>价格<i :class="arrow" v-show="current === 2"></i></span>
      </a>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['searchlist'],
  data () {
    return {
      current: 1,
      arrow: 'el-icon-sort-up',
      direction: 'desc',
      navList: []
    }
  },
  watch: {
    direction: {
      handler (newval, oldval) {
        this.$emit('getUpDown', [this.direction, this.current])
      }
    }
  },
  mounted () {
    this.a = this.searchlist
  },
  methods: {
    romoveNavList (e) {
      if (e.target.localName === 'i') {
        const key = e.target.previousElementSibling.outerText
        this.searchlist.props.forEach((element, index) => {
          if (element.indexOf(key) !== -1) {
            this.searchlist.props.splice(index, 1)
            this.navList.splice(index, 1)
          }
        })
        // this.searchlist.props = ''
        // this.$router.push('search')
      }
    },
    addNav (val) {
      this.navList.push(val)
    },
    romoveKeyword (e) {
      if (e.target.localName === 'i') {
        this.searchlist.keyword = ''
        this.$router.push({
          name: 'search'
        })
      }
    },
    romoveTrademark (e) {
      if (e.target.localName === 'i') {
        this.searchlist.trademark = ''
        this.$router.push('search')
      }
    },
    getjiansuoKey (e) {
      if (e.target.localName === 'a') {
        const a = e.target.getAttribute('data-val')
        this.$emit('getProps', a)
      }
    },
    gosearch (e) {
      if (e.target.localName === 'a') {
        const a = e.target.getAttribute('data-index')
        this.$emit('getTrademark', a)
      }
    },
    changeCurrent1 () {
      if (this.current === 1) {
        if (this.direction === 'desc') {
          this.direction = 'asc'
          this.arrow = 'el-icon-sort-up'
        } else if (this.direction === 'asc') {
          this.direction = 'desc'
          this.arrow = 'el-icon-sort-down'
        }
      } else {
        this.current = 1
      }
    },
    changeCurrent2 () {
      if (this.current === 2) {
        if (this.direction === 'desc') {
          this.direction = 'asc'
          this.arrow = 'el-icon-sort-up'
        } else if (this.direction === 'asc') {
          this.direction = 'desc'
          this.arrow = 'el-icon-sort-down'
        }
      } else {
        this.current = 2
      }
    }
  },
  computed: {
    ...mapState('searchAbout', ['searchList'])
  }
}
</script>

<style lang="less" scoped>
// 面包屑导航
.searchtop {
  .top {
    height: 50px;
    background-color: #fff;
    line-height: 50px!important;
    display: flex;
    padding-left: 10px;
    & > span {
      font-size: 14px;
    }
    .result {
      width: 90%;
      display: flex;
      align-items: center;
      /deep/ .el-breadcrumb__item {
        position: relative;
        border: 1px solid #ccc;
        margin: 0 5px;
        padding: 5px 15px 5px 3px ;
        background-color: rgb(241, 237, 237);
        .el-breadcrumb__separator{
          position: absolute;
          right: 0;
          top: 5px;
          display: block;
          z-index: 999;
          cursor: pointer;
          margin: 0;
          &:hover{
            color: red;
          }
        }
      }
    }
  }
  .middle {
    border: 1px solid #ccc;
    margin-top: 5px;
    & > div {
      height: 40px;
      border: 1px solid #ccc;
      line-height: 40px;
      display: flex;
      .left {
        width: 150px;
        font-size: 13px;
        text-align: right;
        background-color: rgb(231, 228, 228);
      }
      .right {
        width: 1050px;
        display: flex;
        align-items: center;
        font-size: 15px;
        a {
          margin-right: 15px;
          &:hover {
            color: red;
          }
        }
      }
      &:nth-child(1) {
        height: 100px;
        .left {
          line-height: 100px;
        }
        .right {
          a {
            display: block;
            border: 1px solid #ccc;
            color: red;
            font-weight: bold;
            height: 50px;
            width: 90px;
            line-height: 50px;
            text-align: center;
            margin-right: 5px;
          }
        }
      }
    }
  }
  .bottom {
    margin-top: 5px;
    height: 50px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3);
    a {
      float: left;
      display: flex;
      height: 50px;
      width: 90px;
      line-height: 50px;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }
  }
  .current {
    background-color: red;
    color: #fff;
  }
}
</style>
